<template>
    <div id="containerId"></div>
</template>

<script setup>
import { onMounted } from "vue";
// 原理：基于 canvas 标签绘制像素点（位置，颜色等）在平面上计算出 3D 效果
// 下载并引入three库
import * as THREE from "three";

let scene, camera, renderer;
onMounted(() => {
    // 1.场景：放置物体的容器（世界）
    scene = new THREE.Scene();
    // 2.摄像机：类似于人眼，决定看到多大的空间范围
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    // 3.渲染器：接收`场景`和`摄像机`，计算在浏览器上渲染的最终`2D画面`。
    renderer = new THREE.WebGLRenderer({antialias: true});
    // 3.1 将输出canvas的大小调整为(width, height)
    renderer.setSize( window.innerWidth, window.innerHeight );
    // 添加到页面中
    document.getElementById("containerId").appendChild( renderer.domElement );

    // 创建坐标轴，并添加场景世界中
    scene.add(createAxes(5))

    // 创建立方体
    let cube1 = createCube({x: 1})
    // 创建坐标轴1
    let axes1 = createAxes(3)
    // 将坐标轴添加到立方体中
    cube1.add(axes1)
    // 将立方体加入到场景世界中
    scene.add(cube1); 


    // 将摄像机 沿着z轴正方向移动5个单位
    camera.position.z = 5;
    // 把 场景+摄像机 传递给渲染器进行渲染
    renderer.render(scene, camera)
})

/**
 * 创建立方体
*/
function createCube({width=1, height=1, deep=1, x=0, y=0, z=0, color= 0x00ff00}={}) {
    console.log("arguments=", arguments)
    // 1.几何图形 BoxGeometry 立方体（宽、高、深）1单位大小（three.js独有单位）
    const geometry = new THREE.BoxGeometry(width, height, deep);
    // 2.材质（皮肤）：决定我要一个什么样子的立方体（颜色）
    // MeshBasicMaterial 网格（面）基础（纯颜色）材质（0x 16进制颜色）
    const material = new THREE.MeshBasicMaterial({ color: color });
    // 3.创建物体（Mesh）网格材质（面）
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = x;
    cube.position.y = y;
    cube.position.z = z;
    return cube;
}


/**
 * 创建坐标轴
*/
function createAxes(size=1) {
    const axesHelper = new THREE.AxesHelper( size );
    return axesHelper
}
</script>